<template>
    <section class="chart-container">
        <el-row>
            <el-col :span="12">
                <div id="chartLine" style="width:100%; height:300px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine2" style="width:100%; height:300px;"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div id="chartLine3" style="width:100%; height:300px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine4" style="width:100%; height:300px;"></div>
            </el-col>
        </el-row>
    </section>
</template>

<script>
    import echarts from 'echarts'

    export default {
        data() {
            return {
                chartLine: null,
                chartLine2: null,
                chartLine3: null,
                chartLine4: null,
            }
        },
        mounted: function () {
            var _this = this;
            //基于准备好的dom，初始化echarts实例
            this.chartLine = echarts.init(document.getElementById('chartLine'));
            this.chartLine2 = echarts.init(document.getElementById('chartLine2'));
            this.chartLine3 = echarts.init(document.getElementById('chartLine3'));
            this.chartLine4 = echarts.init(document.getElementById('chartLine4'));
            this.chartLine.setOption({
                title: {
                    text: '近一周血压变化',
                    subtext: '来自血压表数据'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['最高血压','最低血压']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {},
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一','二','三','四','五','六','七']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} mmHg'
                    }
                },
                series: [
                    {
                        name:'最高血压',
                        type:'line',
                        data:[100, 102, 98, 106, 110, 120, 108],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最低血压',
                        type:'line',
                        data:[89, 80, 94, 86, 78, 75, 90],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            });
            this.chartLine2.setOption({
                title: {
                    text: '近一周心率变化',
                    subtext: '来自心率表数据'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['心率']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {},
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一','二','三','四','五','六','七']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} bpm'
                    }
                },
                series: [
                    {
                        name:'心率',
                        type:'line',
                        data:[50, 58, 60, 65, 69, 70, 55],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            });
            this.chartLine3.setOption({
                title: {
                    text: '近一周血糖、血脂变化',
                    subtext: '来自血糖、血脂表数据'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['血糖','总胆固醇(TC)']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {},
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一','二','三','四','五','六','七']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} mmol/l'
                    }
                },
                series: [
                    {
                        name:'血糖',
                        type:'line',
                        data:[3.6, 3.8, 4.5, 6.1, 5.8, 5.4, 3.5],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'总胆固醇(TC)',
                        type:'line',
                        data:[5.2, 4.8, 5.6, 5.0, 4.9, 5.1, 4.8],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            });
        }

    }

</script>

<style scoped>
    .chart-container {
        width: 100%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/
    
    .el-col {
        padding: 30px 20px;
    }
</style>